<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>查看订单</title>

    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <script src="../js/jquery/jquery.js"></script>
    <script src="../js/jquery_mobile/jquery.mobile-1.4.2.js"></script>
    <link rel="stylesheet" href="../css/jquery_mobile/jquery.mobile-1.4.2.css"/>
</head>
<body>
<header data-role="header" data-theme="b">
    <a href="#" data-rel="back" class="ui-btn ui-corner-all ui-shadow ui-icon-back ui-btn-icon-left ui-btn-icon-notext">Back</a>
    <h1>查看订单</h1>
    <script>
        $(function(){
            $.getJSON("../json/book_check.json",function(data,status){
                var strJson = JSON.stringify(data);
                var dataObj=eval("("+strJson+")");
                $("#name").text(dataObj.name);
                $("#img").attr("src","../pic/book_check/" + dataObj.img);
                $("#create_time").text("创建时间：" + dataObj.create_time);
                $("#money").text("价钱：" + dataObj.money);
                $("#count").text("数量：" + dataObj.count);
                $("#detail_href").attr("href",dataObj.link);
                $("#tel").attr("href",dataObj.tel);
                $("#cancel").attr("href",dataObj.cancel);
            });
        });
    </script>
</header>
<!--
    由于jquery mobile的机制
    需要加载js，css等内容，得
    在data-role="content"内
    写入js和css
-->
<div data-role="content" class="content">
    <!--外部js开始-->
    <link rel="stylesheet" href="../css/book_check/book_detail.css">
    <!--外部js结束-->

    <div class="ui-grid-a" id="pro_infos">
        <div class="ui-block-a">
            <h1 id="name"> 港澳三天游</h1>

            <p id="description"><strong> 吃喝玩乐各种爽</strong></p>

            <p> -------------</p>
            <ul>
                <li id="create_time"> 创建时间：2014.4.3</li>
                <li id="money"> 价钱：￥1600</li>
                <li id="count"> 数量：2</li>
            </ul>
        </div>
        <div class="ui-block-b">
            <p><img id="img" src="../pic/book_check/restau01.jpg" alt="jeannette photo"></p>

            <p><a id="detail_href" href="#" rel="external" data-role="button" data-theme="c"
                  class="ui-btn ui-btn-up-c ui-btn-corner-all ui-shadow"><span
                    class="ui-btn-inner ui-btn-corner-all ui-btn-icon-left ui-icon-eye"><span class="ui-btn-text"> 商品详细</span></span></a>
            </p>
        </div>
    </div>
    <hr/>
    <a id="tel" href="#" data-role="button" data-corners="false" class="ui-btn ui-shadow ui-corner-all ui-btn-icon-left ui-icon-phone">电话咨询</a>

    <!--点击取消会有弹出窗口-->
    <a href="#popupDialog" data-rel="popup" data-position-to="window" data-transition="pop" class="ui-btn ui-shadow ui-corner-all ui-btn-icon-left ui-icon-delete ui-btn-b">取消订单</a>
    <div data-role="popup" id="popupDialog" data-overlay-theme="b" data-theme="b" data-dismissible="false" style="max-width:400px;">
        <div data-role="header" data-theme="a">
            <h1>取消订单?</h1>
        </div>
        <div role="main" class="ui-content">
            <h3 class="ui-title">美好旅程难道将要离你远去?</h3>
            <a href="#" class="ui-btn ui-corner-all ui-shadow ui-btn-inline ui-btn-b" data-rel="back">取消</a>
            <a id="cancel_travel" href="#" class="ui-btn ui-corner-all ui-shadow ui-btn-inline ui-btn-b" data-rel="back" data-transition="flow">确定</a>
        </div>
    </div>

</div>
</body>
</html>